<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      // class Toggle extends React.Component {
      //   constructor(props) {
      //     super(props);
      //     this.state = {isToggleOn: true};
      //     // this.handleClick = this.handleClick.bind(this);
      //   }
      //   handleClick = () => {
      //     this.setState(prevState => ({
      //       isToggleOn: !prevState.isToggleOn
      //     }));
      //   }
      //   render() {
      //     return (
      //       <button onClick={this.handleClick}>
      //         {this.state.isToggleOn ? 'ON' : 'OFF'}
      //       </button>
      //     );
      //   }
      // }
      // ReactDOM.render(
      //   <Toggle />,
      //   document.getElementById('root')
      // );


      // 使用变量声明的函数名， 调用时可以省去bind函数
      // 或者在添加回调函数 中使用箭头函数调用回调函数
      // 有参数传递时：
      // <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
      // <button onClick={this.deleteRow.bind(this, id)}>Delete

      class Popper extends React.Component {
        constructor() {
          super();
          this.state = {name: 'Hello world!'};
        }
        preventPop(name, e) {
          e.preventDefault();
          alert(name);
        }
        render() {
          return (
            <div>
              <p>hello</p>
              <a href="https://reactjs.org" onClick={this.preventPop.bind(this, this.state.name)}>Click</a>
            </div>
          );
        }
      }
      ReactDOM.render(<Popper/>, document.getElementById('root'));
    </script>
  </body>
</html>
